{% extends 'layouts/modal.html' %}

{% block title %}Scale Image{% endblock %}

{% block class %}modal-xxl{% endblock %}

{% block body %}
  <form>
    <table class="writehat-form">
      <tr>
        <th>
          <label id="imageSizeSliderLabel" for="imageSizeSlider" style="color:white">Image width: 75%</label>
        </th>
        <td>
          <input id="imageSizeSlider" type="range" min="1" max="100" value="100" class="slider-color" style="width: 100%">
        </td>
      </tr>
      <tr>
        <th>
          <label id="imageCaptionLabel" for="imageCaptionInput" style="color:white">Caption:</label>
        </th>
        <td>
          <input id="imageCaptionInput" class="name-validation" type="text" style="width: 100%">
        </td>
      </tr>
    </table>
  </form>

  <div class="pt-4 modal-centered text-center">
    <div class="p-5 ml-auto mr-auto report-page-sample d-flex justify-content-center" style="flex-direction: column; background-color: white; background-size: 40rem; width: 40rem;">
      <div>
        <div id="scale-img" class="p-0 my-0 mx-auto">
        </div>
        <span style="color: black">
          <strong>Figure 1: </strong><span id="figureCaptionExample">Example</span>
        </span>
      </div>
    </div>
  </div>
{% endblock %}

{% block header %}
  {% include 'snippets/textButton.html' with name='Back: Annotate' type='arrow-left' class='load-annotate-modal btn-secondary' %}
  {% include 'snippets/textButton.html' with name='Save' type='save' class='figureSave btn-success' %}
{% endblock %}